<template>
  <div class="about">
    <div v-if="user !== null">
      <a-layout id="components-layout-demo-top-side-2">
        <a-layout-header class="header" style="background: #fefefe">
          <div class="logo" style="color: red">{{ user.roles[0].roleName }}</div>
          <div>
            <h3><span style="color: cornflowerblue"> {{ user.userName }}</span> 欢迎您
              <a @click.prevent="handleLogOut">退出</a>
            </h3>
          </div>
        </a-layout-header>
        <a-layout>
          <a-layout-sider width="200" style="background: #fff">
            <a-menu
                mode="inline"
                :default-selected-keys="['1']"
                :default-open-keys="['1']"
                :style="{ height: '100%', borderRight: 0 }"
            >
              <a-sub-menu v-for="(p,i) in user.permissions" :key="i">
                <template v-if="p.pid === 0">
                  <span slot="title"><a-icon type="user"/>{{ p.permissionName }}</span>
                  <template v-for="(c,j) in p.childPer">
                    <a-menu-item :key="j">
                      <router-link :to="{name:'StuList'}">{{ c.permissionName }}</router-link>
                    </a-menu-item>
                  </template>
                </template>
              </a-sub-menu>
            </a-menu>
          </a-layout-sider>
          <a-layout style="padding: 0 24px 24px">
            <a-breadcrumb style="margin: 16px 0">
            </a-breadcrumb>
            <a-layout-content
                :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '580px' }"
            >
              // 组件切换位置
              <router-view/>
            </a-layout-content>
          </a-layout>
        </a-layout>
      </a-layout>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  name: "WorkSpace",
  components: {
  },
  data() {
    return {
      collapsed: false,
    }
  },

  methods: {
    handleLogOut() {
      this.$store.dispatch("UserLogin/logOut").then(() => {
        this.$router.push({name: "Home"})
      })
    }
  },
  created() {

  },
  computed: {
    ...mapState('UserLogin', ['user', "isLogin"]),
  }
}
</script>
<style>
#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>